<template>
  <div class="material-preview">
    <div class="pre_header w_full">
      <div class="mb-8 w_full flex aligncenter">
        <div class="textover fw-6 f-14 c_222333 p_title">
          {{ item.meterialName }}
        </div>
        <i
          v-if="item.isFavorite === 0"
          class="el-icon-star-off f-16 c_warning2"
          style="margin-left: 8px;"
          @click="handleCollect(item, 1)"
        ></i>
        <i
          v-else
          class="el-icon-star-on f-18 c_warning2"
          style="margin-left: 8px;"
          @click="handleCollect(item, 0)"
        ></i>
      </div>
      <div class="labelbox bg_fff p-8">
        <div class="c_888999 f-12 mt-8">
          <span v-if="count.text > 0">{{ count.text }}文本</span>
          <span v-if="count.file > 0">{{ count.file }}文件</span>
          <span v-if="count.img > 0">{{ count.img }}图片</span>
        </div>
        <div
          class="f-12 c_primary mt-8 mb-8 commhover" 
          @click="dialogVisible = true"
          v-if="item.tagList && item.tagList.length == 0"
        >标签设置</div>
        <div class="f-12 c_primary mt-8 mb-8 commhover flex-rows" v-else>
          <div class="tag-item" v-for="(tag, index) in item.tagList" :key="index">{{ tag.tagName }}</div>
          <i class="el-icon-edit" style="color: rgb(48, 112, 255);font-size: 14px;margin-left: 4px;" @click="dialogVisible = true"></i>
        </div>
      </div>
    </div>
    <div class="pl-20 f-12 c_contentext">内容：</div>
    <div v-for="(msg, index) in item.contentList" :key="index">
      <div class="preview_item" v-if="msg.contentType === 'text'">
        <div class="p_index flexcenter"><span class="indextext">{{ index + 1 }}</span></div>
        <div class="chat-item">
          <div class="chat-bubble-text bg_fff f-15">{{ msg.contentJson || '' }}</div>
        </div>
      </div>
    </div>
    <div class="prev_bottom">
      <div class="flex1 flexcenter" @click="handleOpen(1, item)">
        <el-tooltip class="item" effect="dark" content="群发" placement="top">
          <svg-icon class-name="search-icon c_text2" icon-class="isend" />
        </el-tooltip>
      </div>
      <div class="flex1 flexcenter" @click="handleEdit(item)">
        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
          <svg-icon class-name="search-icon c_text2" icon-class="iedit2" />
        </el-tooltip>
      </div>
      <div class="flex1 flexcenter" @click="handleOpen(2, item)">
        <el-tooltip class="item" effect="dark" content="合并" placement="top">
          <svg-icon class-name="search-icon c_text2" icon-class="ihebing" />
        </el-tooltip>
      </div>
      <div class="flex1 flexcenter" @click="handleDelete(item)">
        <el-tooltip class="item" effect="dark" content="删除" placement="top">
          <svg-icon class-name="search-icon c_text2" icon-class="idelete" />
        </el-tooltip>
      </div>
    </div>
    <SetMaterialTagsDialog :visible="dialogVisible" :material="item" @onCloseDialog="onCloseDialog"/>
  </div>
</template>
<script>
import SetMaterialTagsDialog from './components/SetMaterialTagsDialog'
export default {
  data() {
    return {
      count: {
        text: 0,
        img: 0,
        file: 0
      },
      dialogVisible: false
    };
  },
  props: {
    item: {
      type: Object,
      default: {},
    },
  },
  components: {
    SetMaterialTagsDialog
  },
  watch: {
    item(newItem) {
      this.setMaterialSum(newItem)
    }
  },
  methods: {
    handleOpen(type, item) {
      switch (type) {
        case 1:
          this.open = true;
          break;

        default:
          break;
      }
    },

    // 收藏
    async handleCollect(row, type) {
      await updateMeterial({id: row.id, isFavorite: type})
      this.$emit('onchangeList');
    },

    setMaterialSum(materialItem) {
      let textSum = 0, imgSum = 0, fileSum = 0
      materialItem?.contentList.map(item => {
        switch (item.contentType) {
          case 'text':
            textSum += 1
            break;
          case 'img':
            imgSum += 1
            break;
          case 'file':
            fileSum += 1
            break;
        }
      })
      this.count = { text: textSum, img: imgSum, file: fileSum }
    },

    // 删除
    handleDelete(item) {
      this.$confirm("确定删除该角色?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
      })
        .then(() => {
          // delRole(item.id).then((res) => {
          //   this.getList();
          //   this.$modal.msgSuccess("删除成功");
          // });
        })
        .catch(() => {});
    },

    // 编辑
    handleEdit(item) {
      this.$router.push({ path: "material/edit" });
    },
    // 复制
    handleCopy(item) {
      this.$router.push({ path: "material/edit" });
    },
    onCloseDialog() {
      this.dialogVisible = false
      this.$emit('onchangeList');
    }
  },
};
</script>
<style lang="scss" scoped>
.material-preview {
  height: 100%;
  position: relative;
  padding-bottom: 56px;
  overflow: auto;
  background-color: #f9f9f9;
}
.pre_header {
  padding: 12px 20px;
}
.p_title {
  max-width: 92%;
}
.labelbox {
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}
.c_contentext {
  color: rgba(0, 0, 0, 0.25);
}
.preview_item {
  position: relative;
  padding: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  min-height: 60px;
}
.p_index {
  width: 50px;
}
.indextext {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  background: #ddd;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
}
.chat-item {
  width: calc(100% - 50px);
}
.chat-bubble-text {
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  color: #000;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
}
.prev_bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 48px;
  background-color: #f9f9f9;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e9e9e9;
}
.flex-rows {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .tag-item {
    padding: 2px 8px;
    border: 1px solid #e9e9e9;
    background: #f0f0f0;
    line-height: 16px;
    border-radius: 2px;
    font-size: 12px;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
    color: rgba(0, 0, 0, .85);
    margin-right: 6px;
    margin-bottom: 6px
  }
}
</style>